<template>
  <div class="page3">
    <Row class="row">
      <Col :span="4">
        <div class="right-1">
          <div class="right1-1">
            <span class='title'><span class="title-text">病患总人数</span></span>
            <span class="angle1"></span>
            <span class="angle2"></span>
            <span class="angle3"></span>
            <span class="angle4"></span>
            <div style="height: 100%">
              <span style="display:block;text-align: center; margin-top: 40%">
                <span class="num">{{ total }}</span>
                <span style="color: #6EDDF1">人</span>
              </span>

            </div>
          </div>
        </div>
      </Col>

      <Col :span="4">
        <div class="right-1">
          <div class="right1-1">
            <span class='title'><span class="title-text">男女分布比例</span></span>
            <span class="angle1"></span>
            <span class="angle2"></span>
            <span class="angle3"></span>
            <span class="angle4"></span>
            <part2></part2>
          </div>
        </div>


      </Col>
      <Col :span="8">
        <div class="right-1">
          <div class="right1-1">
            <span class='title'><span class="title-text">挂号医院</span></span>
            <span class="angle1"></span>
            <span class="angle2"></span>
            <span class="angle3"></span>
            <span class="angle4"></span>
            <part1 style="height:100%"/>
          </div>
        </div>
      </Col>


      <Col :span="8">
        <div class="right-1">
          <div class="right1-1">
            <span class='title'><span class="title-text">挂号类型</span></span>
            <span class="angle1"></span>
            <span class="angle2"></span>
            <span class="angle3"></span>
            <span class="angle4"></span>
            <part3></part3>
          </div>
        </div>
      </Col>
    </Row>

    <Row class="row">
      <Col :span="8">
        <div class="right-2">
          <div class="right1-1">
            <span class='title'><span class="title-text">最大最小体重  平均体重</span></span>
            <span class="angle1"></span>
            <span class="angle2"></span>
            <span class="angle3"></span>
            <span class="angle4"></span>
            <part4 style="height: 100%"></part4>
          </div>
        </div>
      </Col>
      <Col :span="8">
        <div class="right-2">
          <div class="right1-1">
            <span class='title'><span class="title-text">最大最小年龄  平均年龄</span></span>
            <span class="angle1"></span>
            <span class="angle2"></span>
            <span class="angle3"></span>
            <span class="angle4"></span>
            <part5 style="height: 100%"/>

          </div>
        </div>
      </Col>
      <Col :span="8">
        <div class="right-2">
          <div class="right1-1">
            <span class='title'><span class="title-text">最大最小身高  平均身高</span></span>
            <span class="angle1"></span>
            <span class="angle2"></span>
            <span class="angle3"></span>
            <span class="angle4"></span>
            <part6 style="height: 100%"/>

          </div>
        </div>
      </Col>
    </Row>

  </div>
</template>

<script>
import {getPatientTotal} from "@/api/patient";

const part1 = () => import('./components/page2/part1');
const part2 = () => import('./components/page2/part2');
const part3 = () => import('./components/page2/part3');
const part4 = () => import('./components/page2/part4');
const part5 = () => import('./components/page2/part5');
const part6 = () => import('./components/page2/part6');


export default {
  name: 'page3',
  components: {
    part1,
    part2,
    part3,
    part4,
    part5,
    part6,

  },
  data() {
    return {
      total: 0,  // 病患总人数
      resizeFn: null
    }
  },
  methods: {
    getData() {
      getPatientTotal().then(res => {
        this.total = res.data
      })
    }
  },
  mounted() {
    this.getData()

    window.addEventListener('resize', this.resizeFn)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeFn)
  }
}
</script>

<style lang="less" scoped>
@font-face {
  font-family: electronicFont;
  src: url(../assets/font/DS-DIGIT-4.ttf)
}

.num {
  font-family: electronicFont;
  font-size: 100px;
  color: #706fd3;
}

.page3 {
  height: 100%;
  width: 100%;
  padding: 14px 20px 20px;
  background: #03044A;
  overflow: hidden;

  .row {
    height: 50%;

    .ivu-col {
      height: 100%;
      padding: 10px;
    }

    .left, .right1-1, .center-bottom {
      height: 100%;
      border: 1px solid #0D2451;
      position: relative;
      background: #151456;

      #left_5 {
        height: 100%;
        width: 45%;
        float: left;
      }

      #left_6 {
        height: 100%;
        width: 55%;
        float: left;
      }

      .circular {
        height: 100%;

        .canvas {
          height: 100%;
          width: 30%;
          float: left;

          .subtitle {
            font-size: 12px;
            font-weight: bold;
            color: #fff;
            height: 25px;
            padding: 10px 0;
            text-align: center;
          }

          .canvasList {
            height: calc(~'100% - 25px');
            text-align: center
          }
        }
      }

      .left1 {
        border-bottom: 1px solid #0D2451;
        background: #151456;
      }

      .title {
        position: absolute;
        display: inline-block;
        color: #6EDDF1;
        border: 2px solid #6EDDF1;
        height: 18px;
        padding: 0 2px;
        left: 50%;
        transform: translate(-50%, -50%);

        .title-text {
          position: relative;
          font-size: 16px;
          background: #09102E;
          display: inline-block;
          padding: 0 4px;
          transform: translateY(-5px);
        }
      }
    }

    .center-top {
      height: 60%;
    }

    .center-bottom {
      height: 40%;

      .bottom-radars {
        height: 55%;
      }

      .bottom-bars {
        height: 45%;
      }
    }

    .right-1 {
      height: 100%;

      .right1-1 {
        height: 92%;
      }
    }

    .right-2 {
      height: 100%;
    }
  }
}
</style>
